<script lang="ts">
	import Input from '$lib/components/Form/Input/Input.svelte';

	// 测试用状态
	let defaultValue = $state('');
	const filledValue = $state('这是一个已填充的值');
	const errorMessage = $state('请输入有效值');
	let showError = $state(false);

	// 处理输入变化
	function handleInput(event: CustomEvent<Event>) {
		const target = event.detail.target as HTMLInputElement;
		defaultValue = target.value;
	}

	// 切换错误状态
	function toggleError() {
		showError = !showError;
	}
</script>

<div class="test-container">
	<h2>Input 组件测试</h2>

	<div class="test-section">		
		<div class="test-input-wrapper">
			<Input
                clearable={true}
                size="lg"
				placeholder="请输入内容"
				value={defaultValue}				
				id="default-input"
			/>
		</div>
		<p>当前值: {defaultValue}</p>
	</div>

	<div class="test-section">
		<h3>已填充值的 Input</h3>
		<div class="test-input-wrapper">
			<Input placeholder="请输入内容" value={filledValue} id="filled-input" />
		</div>
	</div>

	<div class="test-section">
		<h3>禁用的 Input</h3>
		<div class="test-input-wrapper">
			<Input placeholder="禁用状态" disabled={true} id="disabled-input" />
		</div>
	</div>

	<div class="test-section">
		<h3>错误状态的 Input</h3>
		<div class="test-input-wrapper">
			<Input
				placeholder="带错误提示"
				error={showError ? errorMessage : undefined}
				id="error-input"
			/>
		</div>
		<button onclick={toggleError} class="toggle-error-btn">
			{showError ? '隐藏错误' : '显示错误'}
		</button>
	</div>

	<div class="test-section">
		<h3>不同变体的 Input</h3>

		<div class="variants-container">
			<div class="test-input-wrapper">
				<Input placeholder="默认变体" variant="default" id="default-variant" />
				<small>default</small>
			</div>

			<div class="test-input-wrapper">
				<Input placeholder="填充变体" variant="filled" id="filled-variant" />
				<small>filled</small>
			</div>

			<div class="test-input-wrapper">
				<Input placeholder="轮廓变体" variant="outlined" id="outlined-variant" />
				<small>outlined</small>
			</div>
		</div>
	</div>

	<div class="test-section">
		<h3>测试说明</h3>
		<ul>
			<li>点击输入框可观察光标颜色变化为主题色</li>
			<li>聚焦输入框时，提示文字会缩小并移动到左上角</li>
			<li>输入内容后，提示文字保持在左上角位置</li>
			<li>错误状态下，边框和提示文字颜色会变为错误色</li>
		</ul>
	</div>
</div>

<style>
	.test-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	.test-section {
		margin-bottom: 30px;
		padding: 20px;
		border: 1px solid #eee;
		border-radius: 8px;
	}

	.test-input-wrapper {
		margin-bottom: 10px;
		width: 300px;
		position: relative;
	}

	.test-input-wrapper small {
		display: block;
		margin-top: 5px;
		color: #666;
		font-size: 12px;
	}

	.variants-container {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
	}

	.toggle-error-btn {
		padding: 6px 12px;
		background-color: #1890ff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		margin-top: 10px;
	}

	.toggle-error-btn:hover {
		background-color: #40a9ff;
	}

	h2,
	h3 {
		color: #333;
	}

	p {
		color: #666;
	}

	ul {
		color: #666;
		line-height: 1.6;
	}
</style>
